<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-07-31 20:26:41
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-08-27 14:13:15
 * @FilePath: \orderApp\packageOne\pages\register\userPrefer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTextStyle: 'white',
    navigationBarTitleText: '喜好',
  },
}
</route>
<template>
  <view class="accountBox">
    <cu-login title="你好！" subTit="请设置饮食喜好">
      <view>
        <uv-form ref="uForm" :model="preferForm" :rules="rules">
          <uv-form-item
            label="伙食灶"
            prop="kitchenVal"
            @click="showAction(1)"
            borderBottom
            customStyle="margin-top:30rpx"
            labelWidth="160rpx"
          >
            <uv-input
              v-model="preferForm.kitchenVal"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择伙食灶"
              border="none"
            ></uv-input>
            <template v-slot:right>
              <uv-icon name="arrow-right"></uv-icon>
            </template>
          </uv-form-item>
          <uv-form-item
            label="菜系偏好"
            prop="likeStyleVal"
            @click="showAction(2)"
            borderBottom
            customStyle="margin-top:30rpx"
            labelWidth="160rpx"
          >
            <uv-input
              v-model="preferForm.likeStyleVal"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择菜系偏好"
              border="none"
            ></uv-input>
            <template v-slot:right>
              <uv-icon name="arrow-right"></uv-icon>
            </template>
          </uv-form-item>
          <uv-form-item
            label="口味偏好"
            prop="likeTasteVal"
            @click="showAction(3)"
            borderBottom
            customStyle="margin-top:30rpx"
            labelWidth="160rpx"
          >
            <uv-input
              v-model="preferForm.likeTasteVal"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择口味偏好"
              border="none"
            ></uv-input>
            <template v-slot:right>
              <uv-icon name="arrow-right"></uv-icon>
            </template>
          </uv-form-item>
          <uv-button
            shape="circle"
            color="#00754A"
            customStyle="margin-top: 77rpx;height:92rpx;"
            @click="nextStep"
            :disabled="disabled"
          >
            <span style="font-size: 31rpx">下一步</span>
          </uv-button>
        </uv-form>
        <uv-picker
          ref="selectRef"
          color="#000000"
          activeColor="#00754A"
          confirmColor="#00754A"
          :columns="[curList]"
          keyName="name"
          :title="'请选择' + title"
          round="15rpx"
          @confirm="optionsSelect"
        ></uv-picker>
      </view>
    </cu-login>
  </view>
</template>

<script lang="ts" setup>
import { reqFoodOven, reqStyleAll, reqTasteAll, reqSetLike } from '@/service/business/login'

import { getCurrentInstance } from 'vue'
import type { ComponentInternalInstance } from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance
import { useUserStore } from '@/store'
const userStore = useUserStore()

const preferOrigin = () => ({
  kitchenId: '',
  kitchenVal: '',
  likeStyle: '',
  likeStyleVal: '',
  likeTaste: '',
  likeTasteVal: '',
})

const preferForm = ref(preferOrigin())

const title = ref('')
const curList = ref([])
const curIdx = ref(0)
const optionsSelect = (e) => {
  const { kitchenId, id, name } = e.value[0]
  if (curIdx.value == 1) {
    preferForm.value.kitchenId = kitchenId
    preferForm.value.kitchenVal = name
  } else if (curIdx.value == 2) {
    preferForm.value.likeStyle = id
    preferForm.value.likeStyleVal = name
  } else if (curIdx.value == 3) {
    preferForm.value.likeTaste = id
    preferForm.value.likeTasteVal = name
  }
}

const selectRef = ref(null)
const showAction = (idx) => {
  curIdx.value = idx
  selectRef.value.open()
}

const disabled = ref(true)

// 校验表单项放开按钮状态
watch(
  preferForm,
  () => {
    disabled.value = !Object.values(preferForm.value).every((el) => el != '')
  },
  { deep: true },
)

watch(
  curIdx,
  (val) => {
    switch (val) {
      case 1:
        title.value = '伙食灶'
        curList.value = foodList?.value || []
        break
      case 2:
        title.value = '菜系'
        curList.value = styleList?.value || []
        break
      case 3:
        title.value = '口味'
        curList.value = tasteList?.value || []
        break
    }
  },
  { immediate: true },
)

// 设置偏好，更新用户信息并跳转首页
const nextStep = () => {
  const { userId } = userStore.userInfo.user
  const { kitchenId, likeStyle, likeTaste } = preferForm.value
  reqSetLike({ userId, kitchenId, likeStyle, likeTaste }).then((res) => {
    if (res.retCode == 2000) {
      uni.showToast({
        title: '设置成功，欢迎使用',
        icon: 'success',
      })
      userStore.clearUserInfo()
      userStore.setUserInfo(res.data)
      uni.switchTab({ url: '/pages/home/index' })
    }
  })
}

// 获取伙食灶列表
const foodList = ref([])

// 获取菜系列表
const styleList = ref([])

// 获取口味列表
const tasteList = ref([])

onMounted(() => {  
  
  proxy?.$global.getFoodOven().then(res=>{
    foodList.value = res.map((el) => {
        el.name = el.kitchenName
        return el
      })
  })
  proxy?.$global.getTasteAll().then(res=>{
    tasteList.value = res.map((el) => {
        el.name = el.value
        return el
      })
  })
  proxy?.$global.getStyleAll().then(res=>{
    styleList.value = res.map((el) => {
        el.name = el.style
        return el
      })
  })
})
</script>

<style lang="scss" scoped>
//
</style>
